<template>
  <div class="car  bg">
    <search></search>
    <div class="carTop">
      <div class="carLeft"> 全部宝贝<span>{{this.carts.length}}</span>件</div>
      <div class="carRight"><a href="#">编辑</a></div>
    </div>
    <ul>
      <li v-for="(item,index) in carts" :key="index">
        <div class="carProList">
          <div class="carProSelect carProInfo">
            <van-checkbox v-model="item.danxuan" @change="danxuanChecked(item.danxuan)" />
          </div>
          <div class="carProImg carProInfo">
            <img src="../../assets/images/pic1.jpg" alt="" srcset="">
            <!-- <img :src="'../../assets/images/'+item.proImg" /> -->
          </div>
          <div class="cartInformation carProInfo">
            <div class="font12">
              {{item.proName}}
            </div>
            <div class="font13">
              {{item.color}},
              {{item.size}}
            </div>
            <div class="font12 fontc">
              {{item.proPrice | currency('￥')}}
            </div>
            <div class="stepper">
              <van-stepper v-model="item.homeValue" />
            </div>
          </div>
        </div>
        <div class="clear"></div>
      </li>
    </ul>
    <van-submit-bar :price="sum()" button-text="提交订单" @submit="onSubmit">
      <van-checkbox @click="toggleCheckedAll" v-model="checkedAll">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import search from "@/components/Search/Search";
import { mapState } from "vuex";
export default {
  data() {
    return {
      carts: [
        {
          danxuan: false,
          proName: "HLA/海澜之家斜纹提花长袖衬衫2019春季新品服帖长袖正装衬",
          proPrice: 30,
          homeValue: 1,
          proImg: "pic1.jpg",
          color: "米白花纹",
          size: "165/84A"
        },
        {
          danxuan: false,
          proName: "HLA/海澜之家斜纹提花长袖衬衫2019春季新品服帖长袖正装衬",
          proPrice: 50,
          homeValue: 1,
          proImg: "pic1.jpg",
          color: "黑色花纹",
          size: "175/86A"
        },
        {
          danxuan: false,
          proName: "HLA/海澜之家斜纹提花长袖衬衫2019春季新品服帖长袖正装衬",
          proPrice: 60,
          homeValue: 1,
          proImg: "pic1.jpg",
          color: "红色花纹",
          size: "155/84A"
        },
        {
          danxuan: false,
          proName: "HLA/海澜之家斜纹提花长袖衬衫2019春季新品服帖长袖正装衬",
          proPrice: 60,
          homeValue: 1,
          proImg: "pic1.jpg",
          color: "红色花纹",
          size: "155/84A"
        }
      ],
      checkedAll: false,
      partCheck: false
    };
  },

  //  computed:{
  //    ...mapState([
  //      "carts"
  //    ])
  //  },
  methods: {
    toggleCheckedAll(val) {
      if (!this.checkedAll) {
        this.carts.forEach(item => {
          item.danxuan = false;
        });
      } else {
        this.carts.forEach(item => {
          item.danxuan = true;
        });
      }
    },
    danxuanChecked(cart) {
      if (!cart) {
        this.checkedAll = false;
      }

      var isExitCheckedNo = this.carts.every(item => {
        return item.danxuan === true;
      });
      console.log(isExitCheckedNo);

      if (isExitCheckedNo) {
        this.checkedAll = true;
      } else {
        this.checkedAll = false;
      }
    },
    sum() {
      var totalSum = 0;
      this.carts.forEach(item => {
        if (item.danxuan) {
          totalSum += item.proPrice * item.homeValue * 100;
        }
      });
      return totalSum;
    },
    onSubmit(){
      alert("sss")
    }
  },
  components: {
    search
  }
};
</script>
<style lang="scss" scoped>
.car {
  padding: 55px 0px 15px 0px;
  .carTop {
    height: 30px;
    line-height: 30px;
    background: #ffffff;
    margin-bottom: 2px;
    padding: 0px 10px;
    .carLeft {
      float: left;
      color: #cccccc;
      span {
        color: #000000;
        font-weight: bold;
        padding: 0px 5px;
      }
    }
    .carRight {
      float: right;
    }
  }
  li {
    padding: 10px;
    background: #ffffff;
    margin-bottom: 5px;
    .font12 {
      color: #000000;
      font-weight: bold;
      font-size: 12px;
    }
    .font13 {
      color: #cccccc;
      font-size: 12px;
      margin-top: 5px;
      margin-bottom: 5px;
    }
    .fontc {
      color: red;
      font-size: 16px;
      font-weight: bold;
    }
  }
  .carProList {
    // height: 90px;
    .carProSelect {
      width: 8%;
      float: left;
    }
    .carProImg {
      float: left;
      width: 25%;
      img {
        width: 80px;
        height: 80px;
      }
    }
    .cartInformation {
      position: relative;
      width: 67%;
      height: 80px;
      float: left;
      .stepper {
        position: absolute;
        bottom: 0px;
        right: 0px;
      }
    }
  }
}
.van-submit-bar {
  left: 0;
  bottom: 50px;
  width: 100%;
  z-index: 100;
  position: fixed;
  -webkit-user-select: none;
  user-select: none;
}
</style>